<div class="boomtheme-panel">
    <div class="edit-tab-with-sidemenu">
        <aside class="edit-sidemenu-aside">
            <ul class="edit-sidemenu">
                <li>
                    <a ng-click="ctrl.activeEditorTabIndex = -1">
                        <span ng-if="ctrl.activeEditorTabIndex === -1" style="margin-right: 7px;color:orange;">
                            <i class="fa fa-gear" style="margin-right: 7px;"></i> Settings
                        </span>
                        <span ng-if="ctrl.activeEditorTabIndex !== -1" style="margin-right: 7px;">
                            <i class="fa fa-gear" style="margin-right: 7px;"></i> Settings
                        </span>
                    </a>
                </li>
                <li ng-repeat="theme in ctrl.panel.themes track by $index" ng-click="ctrl.activeEditorTabIndex = $index;ctrl.setruntimeThemeIndex($index)">
                    <a>
                        <span ng-if="ctrl.activeEditorTabIndex === $index" style="margin-right: 7px;color:orange;">
                            <span ng-if="ctrl.panel.activeThemeId === $index">
                                <i class="fa fa-paint-brush" style="margin-right: 5px; color:green;"></i> {{ctrl.limitText(theme.name,15)}}
                            </span>
                            <span ng-if="ctrl.panel.activeThemeId !== $index">
                                <i class="fa fa-paint-brush" style="margin-right: 5px;"></i> {{ctrl.limitText(theme.name,15)}}
                            </span>
                        </span>
                        <span ng-if="ctrl.activeEditorTabIndex !== $index" style="margin-right: 7px;">
                            <span ng-if="ctrl.panel.activeThemeId === $index">
                                <i class="fa fa-paint-brush" style="margin-right: 5px; color:green;"></i> {{ctrl.limitText(theme.name,15)}}
                            </span>
                            <span ng-if="ctrl.panel.activeThemeId !== $index">
                                <i class="fa fa-paint-brush" style="margin-right: 5px;"></i> {{ctrl.limitText(theme.name,15)}}
                            </span>
                        </span>
                    </a>
                </li>
                <li>
                    <span ng-click="ctrl.addTheme()" class="btn btn-success"><i class="fa fa-plus"></i>Add new Theme</span>
                </li>
            </ul>
        </aside>
        <div class="edit-tab-content" ng-if="ctrl.activeEditorTabIndex === -1">
            <div class="editor-row">
                <div class="section gf-form-group">
                    <div class="gr-form-inline">
                        <div class="gf-form">
                            <label class="gf-form-label width-16">Disable Theme Picker </label>
                            <input type="checkbox" class="gf-form-input width-4" ng-model="ctrl.panel.disableThemePicker" ng-blur="ctrl.render()" ng-change="ctrl.render()">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="edit-tab-content" ng-repeat="theme in ctrl.panel.themes track by $index" ng-if="ctrl.activeEditorTabIndex === $index">
            <div class="editor-row">
                <div class="section gf-form-group">
                    <div class="gr-form-inline">
                        <div class="gf-form">
                            <label class="gf-form-label width-16">Theme Name </label>
                            <input type="text" class="gf-form-input width-24" ng-model="theme.name">
                            <span ng-click="ctrl.setThemeAsDefault($index)" class="btn btn-success" ng-if="ctrl.panel.activeThemeId === $index">Applied as default theme <i class="fa fa-check-circle"></i></span>
                            <span ng-click="ctrl.setThemeAsDefault($index)" class="btn btn-secondary" ng-if="ctrl.panel.activeThemeId !== $index">Apply as default theme <i class="fa fa-question-circle"></i></span>
                        </div>
                    </div>
                    <div class="gr-form-inline" ng-if="theme.styles.length > 0" ng-repeat="style in theme.styles track by $index">
                        <div class="gf-form" ng-if="style.type === 'basetheme'">
                            <label class="gf-form-label width-16">Base Theme</label>
                            <select class="gf-form-input width-24" ng-model="style.props.theme" ng-options="f.value as f.text for f in ctrl.base_theme_options"
                                ng-change="ctrl.render()"></select>
                        </div>
                        <div class="gf-form" ng-if="style.type === 'url'">
                            <label class="gf-form-label width-16">CSS URL</label>
                            <input type="text" class="gf-form-input width-24" ng-model="style.props.url" data-ng-change="ctrl.render();">
                            <span class="btn btn-danger btn-small" ng-click="theme.deleteStyle($index);ctrl.render();"><i class="fa fa-trash"></i></span>
                        </div>
                        <div class="gf-form" ng-if="style.type === 'style'">
                            <label class="gf-form-label width-16">Custom Style / CSS Override</label>
                            <textarea class="gf-form-input width-24" style="width:100%" rows="5" ng-model="style.props.text" data-ng-change="ctrl.render();"></textarea>
                            <span class="btn btn-danger btn-small" ng-click="theme.deleteStyle($index);ctrl.render();"><i class="fa fa-trash"></i></span>
                        </div>
                        <div class="gf-form" ng-if="style.type === 'bgimage'">
                            <label class="gf-form-label width-16">BG Image URL</label>
                            <input type="text" class="gf-form-input width-24" ng-model="style.props.url" data-ng-change="ctrl.render();">
                            <span class="btn btn-danger btn-small" ng-click="theme.deleteStyle($index);ctrl.render();"><i class="fa fa-trash"></i></span>
                        </div>
                    </div>
                    <br />
                    <div class="gr-form-inline">
                        <div class="gf-form">
                            <span class="gf-form-input btn btn-secondary width-12" ng-click="theme.addStyle('style');ctrl.render();">Add Custom CSS</span>
                            <span class="gf-form-input btn btn-secondary width-12" ng-click="theme.addStyle('url');ctrl.render();">Add external URL</span>
                            <span class="gf-form-input btn btn-secondary width-12" ng-click="theme.addStyle('bgimage');ctrl.render();">Add BG image</span>
                        </div>
                    </div>
                    <br />
                    <div class="gr-form-inline">
                        <div class="gf-form">
                            <span class="gf-form-input btn btn-danger width-12" ng-click="ctrl.deleteTheme($index);ctrl.render();">Delete Theme</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
